<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <fieldset>
        <legend>ajax 异步请求</legend>
        <button onclick="doAjaxGet01()">Ajax Get Request</button>
        <span id="result">Data is Loading ...</span>
    </fieldset>

    <script type="text/javascript">
        function doAjaxGet01() {
            // 1. 创建XHR对象
            var xhr = new XMLHttpRequest();
            // 2. 在xhr对象上注册状态监听
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4 && xhr.readyState == 200){
                    var sp = document.getElementById("result");
                    sp.innerText = xhr.responseText;
                }
            }

            xhr.open("GET", "http://localhost/doAjaxGet01", true);
            xhr.send(null);
            // 3. 与服务器建立连接(指定请求方式, 请求url, 异步)
            // 4. 想服务端发起请求
        }
    </script>
</body>
</html>